<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!--机构信息 开始-->
      <el-row>
        <el-card class="box-card">
          <div slot="header">
            <span style="color: #303133;font-size: 18px;">机构资料</span>
          </div>
          <div style="height: 50px;">
            <span
              style="color: #909399;
                        font-size: 14px;
                        width: 200px;
                        display: block;
                        float: left;"
            >公司名称：</span>
            <span style="color:#303133;font-size:14px;" v-html="name"></span>
          </div>
          <div style="height: 100px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >营业执照：</span>
            <span>
              <el-image
                style="width: 100px; height: 100px"
                :src="businessPicUrl"
                :preview-src-list="businessPicSrcList"
              ></el-image>
            </span>
          </div>
          <div style="height: 50px;margin-top: 20px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >营业执照有效期：</span>
            <span style="color: #303133;font-size: 14px;">固定期限</span>
            <span style="color: #303133;font-size: 14px;" v-html="businessTerm"></span>
          </div>
          <div style="height: 50px;">
            <span
              style="color: #909399;
                        font-size: 14px;
                        vertical-align: top;
                        width: 200px;
                        display: block;
                        float: left;"
            >机构营业执照注册号：</span>
            <span
              style="color: #303133;
                         font-size: 14px;
                         width: 600px;
                         display: block;
                         float: left;"
              v-html="businessRegistNo"
            ></span>
          </div>
          <div style="height: 100px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >教育资质证书：</span>
            <span>
              <el-image
                style="width: 100px; height: 100px"
                :src="eduCertImgUrl"
                :preview-src-list="eduCertImgSrcList"
              ></el-image>
            </span>
          </div>
          <div style="height: 50px;margin-top: 20px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >证件有效期：</span>
            <span style="color: #303133;font-size: 14px;">固定期限</span>
            <span style="color: #303133;font-size: 14px;" v-html="eduCertTerm"></span>
          </div>
          <div>
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >证书编号：</span>
            <span style="color: #303133;font-size: 14px;" v-html="eduCertNo"></span>
          </div>
        </el-card>
      </el-row>
      <!--机构信息 结束-->
      <!--课堂信息 开始-->
      <el-row style="margin-top: 20px;">
        <el-card class="box-card">
          <div slot="header">
            <span style="color: #303133;font-size: 18px;">课堂信息</span>
          </div>
          <div style="height: 100px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >机构图标：</span>
            <span>
              <el-image
                style="width: 100px; height: 100px"
                :src="logoUrl"
                :preview-src-list="logoSrcList"
              ></el-image>
            </span>
          </div>
          <div style="height: 50px;margin-top: 30px;">
            <span
              style="color: #909399;
                        font-size: 14px;
                        width: 200px;
                        display: block;
                        float: left;"
            >机构名称：</span>
            <span style="color:#303133;font-size:14px;" v-html="name"></span>
          </div>
          <div style="height: 100px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >商标注册证：</span>
            <span>
              <el-image
                style="width: 100px; height: 100px"
                :src="trademarkPicUrl"
                :preview-src-list="trademarkPicSrcList"
              ></el-image>
            </span>
          </div>

          <div style="height: 50px;margin-top: 20px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >机构简介：</span>

            <span
              style="color: #303133;
                         font-size: 14px;
                         width:80%;
                         display: block;
                         float: left;"
              v-html="intro"
            ></span>
          </div>
          <div style="height: 50px;">
            <span
              style="color: #909399;
                        font-size: 14px;
                        vertical-align: top;
                        width: 200px;
                        display: block;
                        float: left;"
            >一句话简介：</span>
            <span
              style="color: #303133;
                         font-size: 14px;
                         width: 600px;
                         display: block;
                         float: left;"
              v-html="briefIntro"
            ></span>
          </div>
          <div style="height: 50px;margin-top: 20px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >主营类目：</span>
            <span style="color: #303133;font-size: 14px;" v-html="mainCategory"></span>
          </div>
        </el-card>
      </el-row>
      <!--课堂信息 结束-->
      <!--申请人信息 开始-->
      <el-row style="margin-top: 20px;">
        <el-card class="box-card">
          <div slot="header">
            <span style="color: #303133;font-size: 18px;">申请人信息</span>
          </div>
          <div style="height: 50px;">
            <span
              style="color: #909399;
                        font-size: 14px;
                        width: 200px;
                        display: block;
                        float: left;"
            >申请人：</span>
            <span style="color:#303133;font-size:14px;" v-html="linkname"></span>
          </div>
          <div style="height: 100px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >手持身份证照片：</span>
            <span>
              <el-image
                style="width: 100px; height: 100px"
                :src="handPhotosUrl"
                :preview-src-list="handPhotosSrcList"
              ></el-image>
            </span>
          </div>
          <div style="height: 50px;margin-top: 20px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >手机：</span>
            <span style="color: #303133;font-size: 14px;" v-html="phone"></span>
          </div>
          <div style="height: 50px;">
            <span
              style="color: #909399;
                        font-size: 14px;
                        vertical-align: top;
                        width: 200px;
                        display: block;
                        float: left;"
            >邮箱：</span>
            <span
              style="color: #303133;
                         font-size: 14px;
                         width: 600px;
                         display: block;
                         float: left;"
              v-html="email"
            ></span>
          </div>
          <div style="height: 100px;">
            <span
              style="color: #909399;
                         font-size: 14px;
                         vertical-align: top;
                         width: 200px;
                         display: block;
                         float: left;"
            >承诺书：</span>
            <span>
              <el-image
                style="width: 100px; height: 100px"
                :src="promiseLetterUrl"
                :preview-src-list="promiseLetterSrcList"
              ></el-image>
            </span>
          </div>
        </el-card>
      </el-row>
      <!-- 机构地址 -->
      <el-row style="margin-top: 20px;display: none;">
        <div style="height: 50px;">
          <el-input type="textarea" :rows="2" v-model="address"></el-input>
        </div>
      </el-row>
      <!--申请人信息 结束-->
      <el-row style="margin-top: 20px;">
        <div style="height: 50px;">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="approvalComment"></el-input>
        </div>
      </el-row>
      <div style="margin-top: 30px;float: right;">
        <el-button type="primary" @click="agreeAudit">通过</el-button>
        <el-button type="danger" @click="refuAudit">拒绝</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { detail, approve } from '@/api/xczx/institutions'
export default {
  data() {
    return {
      companyId: '',
      name: '', // 公司名称
      businessTerm: '', // 营业执照有效期
      businessRegistNo: '', // 机构营业执照注册号
      eduCertTerm: '', // 证件有效期
      eduCertNo: '', // 证书编号
      intro: '', // 机构简介
      briefIntro: '', // 一句话简介
      mainCategory: '', // 主营类目
      linkname: '', // 申请人
      phone: '', // 手机
      email: '', // 邮箱
      approvalComment: '', // 审批意见
      approvalDate: '', // 审核日期
      trademarkPic: '', // 商标注册证
      logo: '', // 机构logo
      businessPic: '', // 营业执照
      eduCertImg: '', // 教育资质证书
      handPhotos: '', // 手持身份证照片
      address: '', // 机构地址
      businessPicUrl: '', // 营业执照
      businessPicSrcList: [], // 营业执照预览
      eduCertImgUrl: '', // 教育资质证照片
      eduCertImgSrcList: [], // 教育资质证照片预览
      logoUrl: '', // 机构logo
      logoSrcList: [], // 机构logo预览预览
      trademarkPicUrl: '', // 商标注册证
      trademarkPicSrcList: [], // 商标注册证预览
      handPhotosUrl: '', // 手持身份证
      handPhotosSrcList: [], // 手持身份证预览
      promiseLetterUrl: '', // 承诺书
      promiseLetterSrcList: [] // 承诺书预览
    }
  },
  methods: {
    // 初始数据
    initialDate() {
      // 读取数据
      this.getList()
    },
    // 通过
    async agreeAudit() {
      let data = {
        companyId: this.companyId,
        address: this.address,
        name: this.name,
        phone: this.phone,
        verifyCode: this.verifyCode,
        verifyKey: this.verifyKey,
        approvalComment: this.approvalComment,
        approvalStatus: this.NET.INSTIUTIONS_THROUGH
      }
      await approve(data).then(() => {
        this.$router.push('/institutions/insaudit')
      })
    },
    // 拒绝
    async refuAudit() {
      let data = {
        companyId: this.companyId,
        address: this.address,
        name: this.name,
        phone: this.phone,
        verifyCode: this.verifyCode,
        verifyKey: this.verifyKey,
        approvalComment: this.approvalComment,
        approvalStatus: this.NET.INSTIUTIONS_REFUSE
      }
      await approve(data).then(() => {
        this.$router.push('/institutions/insaudit')
      })
    },
    // 根据机构id获取机构详细资料
    async getList() {
      const { data: res } = await detail({ companyId: this.companyId })
      this.name = res.name
      this.businessTerm = res.businessTerm
      this.businessRegistNo = res.businessRegistNo
      this.eduCertTerm = res.eduCertTerm
      this.eduCertNo = res.eduCertNo
      this.intro = res.intro
      this.briefIntro = res.briefIntro
      this.mainCategory = res.mainCategory
      this.linkname = res.linkname
      this.phone = res.phone
      this.email = res.email
      this.address = res.address
      this.approvalDate = res.approvalDate
      this.businessPicUrl = res.businessPic
      this.businessPicSrcList.push(res.businessPic)
      this.eduCertImgUrl = res.eduCertImg
      this.eduCertImgSrcList.push(res.eduCertImg)
      this.logoUrl = res.logo
      this.logoSrcList.push(res.logo)
      this.trademarkPicUrl = res.trademarkPic
      this.trademarkPicSrcList.push(res.trademarkPic)
      this.handPhotosUrl = res.handPhotos
      this.handPhotosSrcList.push(res.handPhotos)
      this.promiseLetterUrl = res.promiseLetter
      this.promiseLetterSrcList.push(res.promiseLetter)
    }
  },
  created() {
    this.companyId = this.$route.query.companyId
    var _this = this
    this.initialDate()
  }
}
</script>
